<template>
	<view >
		<view v-if="show" class="big-box">
			<view class="info-box">
				<view style="">
					<view class="info-name">
						<view style="display: flex;align-items: center;">
							<view 
							v-if="lastCourse && lastCourse.is_must" 
							style="width: 64rpx;
								line-height: 32rpx;
								text-align: center;
								color: #fff;
								margin-right: 16rpx;
								height: 32rpx;
								font-size: 20rpx;
								background: linear-gradient(224deg,#fb6f3f, #fe3001 98%);
								border-radius: 6rpx;
								"
							>
								必修
							</view>
							<view
								v-else 
								style="width: 64rpx;
								line-height: 32rpx;
								text-align: center;
								margin-right: 16rpx;
								color: #fff;
								height: 32rpx;
								font-size: 20rpx;
								background: linear-gradient(224deg,#71d5a1, #19be6b 98%);
								border-radius: 6rpx;
								"
							>
								选修
							</view>
						</view>
						<view class="">
							{{ lastCourse?.title }}
						</view>
					</view>
					<view class="course-info">
						课程学时: {{lastCourse?.study_score}}/{{lastCourse?.total_score}}
					</view>
				</view>
				<view style="display: flex;align-items: center;">
					<view class="bottom-box" @click="jumpCourseDetail">
						继续学习
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import request from '@/common/js/request/allRequest.js';
	export default {
		props:{
			bool: { type: Boolean, required: true },
			enterId:{type:Number, required: true}
		},
		data(){
			return{
				lastCourse:undefined,
				show:true
			}
		},
		watch: {
			// 随机字符串 改变了
			bool: {
				handler(newV, oldV) {
					this.getDataReq()
				},
				// immediate: true,
			}
		},
		methods:{
			jumpCourseDetail(){
				uni.navigateTo({
					url:`/pagesB/pages/course/details/index?item_type=2&courseId=${this.lastCourse.teach_course_info_id}&jieId=${this.lastCourse.teach_chapter_id}&cert_id=${this.enterId}&teach_course_info_id=${this.lastCourse.teach_course_id}`
				})
			},
			getDataReq(){
					request.getLastStudy({
						success:(res) => {
							if(Array.isArray(res)){
								this.show = false
							}else{
								this.show = true
								this.lastCourse = res
							}
							
						},
						fail:(err) => {}
					})
			}
		}
	}
</script>

<style scoped lang="less">
	.course-info{
		font-size: 26rpx;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		color: #7f7f7f;
		line-height: 36rpx;
	}
	.bottom-box{
		width: 160rpx;
		height: 58rpx;
		background: #4a87fd;
		border-radius: 29rpx;
		line-height: 58rpx;
		text-align: center;
		font-size:24rpx;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		color: #ffffff;
	}
	.info-name{
		display: flex;
		margin-bottom: 20rpx;
	}
	.info-box{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 24rpx 36rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 50%, rgba(74, 160, 253, 0.19) 100%);
		border-radius: 12rpx;
		box-shadow: 0px 4px 20px 0px rgba(139,149,173,0.11);
	}
	.big-box{
		padding: 40rpx 24rpx 26rpx 24rpx;
	}
</style>